import React from 'react';
import { Button, Row, Col } from 'antd';
import UserList from './list';
import CommonListsIndex from '../../../components/CommonLists/index';
import FilterTool from '../../../components/FilterTool';
import Add from './add';
import AuditStatus from '../../../components/AuditStatus';
import Question from '../../../components/Question';
import { Tooltip } from 'antd';
import { IS_SYSTEM } from '../../../utils/constant';

import Modal from '../../../components/Modal/index';
import RelationStrategy from '../Strategy/relation';
import RelationComponent from '../Strategy/Component/relation';
import RelationIndicator from '../../Variable/Indicator/relation';
import Field from './field';

class TacticsEventIndex extends CommonListsIndex {
  constructor(props) {
    super(props);
    this.api = 'event';
    this.addComponent = Add;
    this.editComponent = Add;
    this.listsComponent = UserList;
    this.model_width = 400;
  }
  componentDidMount() {
    this.getAppCodeList();
    this.getProductCodeList();
  }

  // 关联策略
  showRelationStrategy = (record) => {
    Modal.open({
      title: (
        <>
          关联策略<span style={{ fontSize: 10, color: 'grey', marginLeft: 4 }}>仅展示当前部门拥有权限数据</span>
        </>
      ),
      width: '1000px',
      content: (
        <RelationStrategy
          record={record}
          param={{ strategy_type: 2, type: 'event', app_id: record.app_id, event_id: record.event_id }}
        />
      ),
      isOkBtn: true,
      maskClosable: false,
      isCancelBtn: true,
      ok: () => Modal.close(),
    });
  };

  showRelationComponent = (record) => {
    Modal.open({
      title: (
        <>
          关联组件<span style={{ fontSize: 10, color: 'grey', marginLeft: 4 }}>仅展示当前部门拥有权限数据</span>
        </>
      ),
      width: '1000px',
      content: (
        <RelationComponent
          record={record}
          param={{ strategy_type: 1, type: 'event', app_id: record.app_id, event_id: record.event_id }}
        />
      ),
      isOkBtn: true,
      maskClosable: false,
      isCancelBtn: true,
      ok: () => Modal.close(),
    });
  };

  showRelationIndicator = (record) => {
    Modal.open({
      title: (
        <>
          关联指标<span style={{ fontSize: 10, color: 'grey', marginLeft: 4 }}>仅展示当前部门拥有权限数据</span>
        </>
      ),
      width: '1000px',
      content: <RelationIndicator record={record} param={{ app_id: record.app_id, event_id: record.event_id }} />,
      isOkBtn: true,
      maskClosable: false,
      isCancelBtn: true,
      ok: () => Modal.close(),
    });
  };

  // 打开系统字段
  handleOpenSystemField = (record, type) => {
    Modal.open({
      title:
        type === IS_SYSTEM._TRUE ? (
          '系统字段'
        ) : (
          <>
            自定义字段<span style={{ fontSize: 10, color: 'grey', marginLeft: 4 }}>仅展示当前部门拥有权限数据</span>
          </>
        ),
      width: '1000px',
      content: (
        <Field
          param={{
            is_system: type,
            ...(type === IS_SYSTEM._FALSE ? { app_id: record.app_id, event_id: record.event_id } : {}),
          }}
        />
      ),
      isOkBtn: true,
      maskClosable: false,
      isCancelBtn: true,
      ok: () => Modal.close(),
    });
  };

  getColumns = () => {
    return [
      {
        title: '事件名称',
        key: 'event_name',
        dataIndex: 'event_name',
        ellipsis: true,
        width: 90,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className="overflowtext">
                <Button type='link' onClick={() => this.showDetail(record)}>
                  {text}
                </Button>
              </div>
            </Tooltip>
          );
        },
      },
      {
        title: '事件Code',
        dataIndex: 'event_code',
        key: 'event_code',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {text}
              </div>
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '所属渠道',
              this.state.applications,
              'app_id',
              this.refreshTableFilterWithAppV2.bind(this, 'app_id'),
              ['app_id', 'app_name']
            )}
          </>
        ),
        dataIndex: 'app_name',
        key: 'app_name',
        ellipsis: true,
        width: 90,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: (
          <>
            {this.getFilterTitle(
              '关联产品',
              this.state.products,
              'product_id',
              this.refreshTableFilterWithAppV2.bind(this, 'product_id'),
              ['product_id', 'product_name']
            )}
          </>
        ),
        dataIndex: 'product_name',
        key: 'product_name',
        ellipsis: true,
        width: 90,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '今日调用次数',
        dataIndex: 'today_call_num',
        key: 'today_call_num',
        ellipsis: true,
        render: (text, record) => {
          return (
            <>
              {record.today_call_num === 0 && '未接入'}
              {record.today_call_num !== 0 && text}
            </>
          );
        },
      },
      {
        title: (
          <span>
            字段
            <Question
              title={
                <>
                  <div>系统字段：系统内置，所有事件可见</div>

                  <div>自定义字段：策略管理员自定义，只在某一事件下可见</div>
                </>
              }
            />
          </span>
        ),
        key: 'system_field_count',
        ellipsis: true,
        width: 120,
        // render: (text, record) => {
        //   return (
        //     <>
        //       <div>
        //         系统字段：
        //         <Button
        //           type='link'
        //           onClick={() => this.props.history.push(`/variable/field?is_system=${IS_SYSTEM._TRUE}`)}
        //         >
        //           {record.system_field_count}
        //         </Button>
        //       </div>
        //       <div>
        //         自定义字段：
        //         <Button
        //           type='link'
        //           onClick={() =>
        //             this.props.history.push(
        //               `/variable/field?is_system=${IS_SYSTEM._FALSE}&app_id=${record.app_id}&event_id=${
        //                 record.event_id
        //               }`
        //             )
        //           }
        //         >
        //           {record.custom_field_count}
        //         </Button>
        //       </div>
        //     </>
        //   );
        // },
        render: (text, record) => {
          return (
            <>
              <div>
                系统字段：
                <Button type='link' onClick={() => this.handleOpenSystemField(record, IS_SYSTEM._TRUE)}>
                  {record.system_field_count}
                </Button>
              </div>
              <div>
                自定义字段：
                <Button type='link' onClick={() => this.handleOpenSystemField(record, IS_SYSTEM._FALSE)}>
                  {record.custom_field_count}
                </Button>
              </div>
            </>
          );
        },
      },
      {
        title: '指标',
        dataIndex: 'feature_count',
        key: 'feature_count',
        ellipsis: true,
        align: 'center',
        render: (text, record) => {
          return (
            <Button type='link' onClick={this.showRelationIndicator.bind(this, record)}>
              {text}
            </Button>
          );
        },
      },
      {
        title: '组件',
        dataIndex: 'assembly_count',
        key: 'assembly_count',
        ellipsis: true,
        align: 'center',
        render: (text, record) => {
          return (
            <Button type='link' onClick={this.showRelationComponent.bind(this, record)}>
              {text}
            </Button>
          );
        },
      },
      {
        title: '策略',
        dataIndex: 'process_count',
        key: 'process_count',
        ellipsis: true,
        align: 'center',
        render: (text, record) => {
          return (
            <Button type='link' onClick={this.showRelationStrategy.bind(this, record)}>
              {text}
            </Button>
          );
        },
      },
      {
        title: '所属部门',
        dataIndex: 'dept_name',
        key: 'dept_name',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={text} placement='topLeft'>
              {text}
            </Tooltip>
          );
        },
      },
      {
        title: '可见部门',
        key: 'dept_arr',
        ellipsis: true,
        render: (text, record) => {
          return (
            <Tooltip title={record.dept_arr.name && record.dept_arr.name.join(',')} placement='topLeft'>
              {record.dept_arr.name && record.dept_arr.name.join(',')}
            </Tooltip>
          );
        },
      },
      {
        title: '创建/修改人',
        dataIndex: 'create_user_name',
        key: 'create_user_name',
        ellipsis: true,
        render: (text, record) => {
          var content = !!record.update_user_name
            ? `${record.create_user_name}/${record.update_user_name}`
            : `${record.create_user_name}/${record.create_user_name}`;
          return (
            <Tooltip title={content} placement='topLeft'>
              {content}
            </Tooltip>
          );
        },
      },

      {
        title: '修改时间',
        dataIndex: 'update_time',
        key: 'update_time',
        ellipsis: true,
        render: (text, record) => {
          var content = !!record.update_time ? record.update_time : record.create_time;
          return (
            <Tooltip title={content} placement='topLeft'>
              <div className='overflowtext' style={{ width: '100%' }}>
                {content}
              </div>
            </Tooltip>
          );
        },
      },
      {
        title: '审核情况',
        key: 'status',
        dataIndex: 'audit_label',
        ellipsis: true,
        render: (text, record) => {
          return <AuditStatus text={text} record={record} />;
        },
      },
    ];
  };

  render() {
    const ListsComponent = this.listsComponent;
    const data = [
      {
        type: 'Search',
        key: 'keyword',
        name: 'keyword',
        defaultValue: '',
        placeholder: '请输入事件名称|事件CODE|创建人|修改人进行搜索',
      },
    ];
    return (
      <div>
        <Row type='flex' justify='space-between' align='middle'>
          <Col span={6} style={{ textAlign: 'middle' }}>
            <Button type='primary' onClick={this.add.bind(this, { title: '添加事件' })}>
              添加事件
            </Button>
          </Col>
          <Col span={18}>
            <FilterTool
              ref='filterTool'
              data={data}
              colNum={1}
              query={this.freshQueryList}
              refreshFilter={this.refreshFilter}
              isOnChange={true}
              refresh={this.resetList}
              justify='end'
            />
          </Col>
        </Row>
        <div className='inner-content' style={{ marginTop: '10px' }}>
          <ListsComponent
            {...this.state}
            edit={this.edit}
            showDetail={this.showDetail}
            queryList={this.freshQueryList}
            refreshTableFilter={this.refreshTableFilter}
            onChangePagination={this.onChangePagination}
            queryTableParams={this.queryTableParams}
            rowKey='event_id'
            columns={this.getColumns()}
          />
        </div>
      </div>
    );
  }
}

export default TacticsEventIndex;
